<template>
  <div class="detail bg-gray-200">
    <NavBar routerName="CategoryItem"></NavBar>
    <SlideShow></SlideShow>
    <Specification :isShow="attrIsTrue"></Specification>
    <Attribution></Attribution>
    <Freight></Freight>
    <ProductDetails></ProductDetails>
    <FooterBuy :goSpec="goSpec"></FooterBuy>
    </div>
</template>

<script>
import NavBar from '@/components/navBar.vue'
import SlideShow from '@/views/Classification/components/slideShow.vue'
import Specification from '../components/specification.vue'
import Attribution from '../components/attribution.vue'
import Freight from '@/views/Classification/components/freight.vue'
import ProductDetails from '../components/productDetails.vue'
import FooterBuy from '../components/footerBuy.vue'
import { mapActions } from 'vuex'
export default {
  name: 'Detail',
  components: {
    NavBar,
    SlideShow,
    Specification,
    Attribution,
    Freight,
    ProductDetails,
    FooterBuy
  },
  data () {
    return {
      attrIsTrue: false
    }
  },
  watch: {

  },
  mounted () {
    this.attrIsTrue = false
    this.getDetailData(this.$route.params.id)
  },
  methods: {
    ...mapActions('Classification', { getDetailData: 'getDetailData' }),
    goSpec (isTrue) {
      this.attrIsTrue = isTrue
    }

  }
}

</script>
<style scoped lang='scss'>
</style>
